<template>
  <div class="login">
    <div class="login_header">
      <img src="@/assets/img/1081b91851f089f5c37fe36f7baef55.png">
    </div>
    <div class="login_content">
      <div class="content">
        <div class="underline">
          <span class="title1 color1 zIndex fontBold">请填写以下信息报名</span>
        </div>
        <div class="login_field">
          <van-cell-group>
            <van-field
              v-model="login.company"
              @update:model-value="updateValue"
              center
              placeholder="请填写完整公司名称"
            >
              <template #left-icon>
                <div class="flex justify_between align_center">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-gongsimingcheng" />
                  </svg>
                  <span class="line">|</span>
                </div>
              </template>
            </van-field>
            <van-field
              v-model="login.username"
              center
              placeholder="请填写姓名"
            >
              <template #left-icon>
                <div class="flex justify_between align_center">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-xingming" />
                  </svg>
                  <span class="line">|</span>
                </div>
              </template>
            </van-field>
            <van-field
              v-model="login.phone"
              maxlength="11"
              type="digit"
              center
              placeholder="请填写手机号码"
            >
              <template #left-icon>
                <div class="flex justify_between align_center">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-shoujihao" />
                  </svg>
                  <span class="line">|</span>
                </div>
              </template>
            </van-field>
            <van-field
              v-model="login.code"
              center
              maxlength="4"
              type="digit"
              placeholder="短信验证码"
            >
              <template #left-icon>
                <div class="flex justify_between align_center">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-duanxin" />
                  </svg>
                  <span class="line">|</span>
                </div>
              </template>
              <template #button>
                <van-button
                  :disabled="!!smsT"
                  color="#12142E"
                  size="small"
                  type="primary"
                  @click="getSms"
                >
                  {{ smsT ? `${smsT}s` : "发送验证码" }}
                </van-button>
              </template>
            </van-field>
          </van-cell-group>
          <!-- <div class="content2 color2 font400">
            温馨提示：若未注册，将自动生成账号
          </div> -->
          <van-row
            class="listst"
            type="flex"
            justify="center"
            v-show="showSettled"
          >
            <van-col span="24">
              <div
                class="items"
                v-for="(item, index) in EnterpriseInfo"
                :key="index"
                @click="chVal(item.company_name)"
              >
                <p>名称:{{ item.company_name }}</p>
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="login_foter">
          <div
            class="submit content1 color1 font400"
            @click="submit"
          >
            确定
          </div>
          <p class="content3 color3 font400">
            遇到问题？联系我们寻求帮助
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Toast, Dialog } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userlogin, getSmsCode, companyQueryName } from '@/api/index'
import { getToken, setToken } from '@/service/cookie'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const login: any = ref({
  bind_id: getToken('bindId'),
  company: '',
  username: '',
  code: '',
  phone: ''
})

const showSettled: any = ref(false)
const EnterpriseInfo: any = ref([])
const smsT: any = ref(0)

const bindId = getToken('bindId')
if (bindId === undefined || bindId === 'undefined' || !bindId) {
  router.replace('/')
}

const updateValue = async () => {
  const { list }:any = await companyQueryName({ company_name: login.value.company })
  if (list.length > 0) {
    EnterpriseInfo.value = list
    showSettled.value = true
  } else {
    showSettled.value = false
  }
}

const chVal = async (i:any) => {
  login.value.company = i
  showSettled.value = false
}

const getSms = async () => {
  if (!login.value.phone) {
    Toast('请先输入手机号码')
  } else if (login.value.phone.length < 11) {
    Toast('手机号码错误')
  } else {
    try {
      await getSmsCode({
        phone: login.value.phone
      })
      smsT.value = 60
      const smsid = setInterval(() => {
        smsT.value = smsT.value - 1
        if (smsT.value === 0) {
          clearInterval(smsid)
        }
      }, 1000)
    } catch (error: any) {
      Toast(error.message)
    }
  }
}

const submit = async () => {
  try {
    const res: any = await userlogin({ ...login.value })
    setToken('token', res.token)
    setToken('bindId', '')
    store.dispatch('fetchUserInfo')
    Dialog.alert({
      title: '温馨提示',
      message: '登录成功'
    }).then(() => {
      if (sessionStorage.getItem('goBackUrl')) {
        window.location.replace(`${sessionStorage.getItem('goBackUrl')}`)
      } else {
        if (store.state.from.path !== '/') {
          router.back()
        } else {
          router.replace('/')
        }
      }
    })
  } catch (error: any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
.login {
  .underline {
    width: 250px;
  }
  .login_header {
    width: 100%;
    height: 216px;
    img {
      width: 100%;
    }
  }
  .login_content {
    position: relative;
    top: -40px;
    width: 100%;
    height: 100%;
    background: #ffffff;
    // box-shadow: 0px 0px 20px 1px rgba(22, 12, 6, 0.09);
    border-radius: 20px 20px 0px 0px;
    .content {
      padding: 40px 30px;
    }
    .login_field {
      margin-top: 35px;
      position: relative;
      .icon {
        width: 20px;
        height: 20px;
      }
    }
    .content2 {
      margin-top: 20px;
    }
    .submit {
      // width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      font-weight: 400;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
    }
    .login_foter {
      // position: fixed;
      margin-top: 60px;
      .content3 {
        margin-top: 30px;
        text-align: center;
        text-decoration: underline;
      }
    }
    .line {
      color: #d8d8d8;
      margin: 0 13px;
    }
  }
}
  .listst {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 45px;
    left: 50%;
    z-index: 99;
    background-color: #f8f8f8;
    transform: translateX(-50%);
    border: 1px solid #666;
    .items {
      border-bottom: 1px solid #333;
    padding: 15px 5px;

      p {
        margin: 5px;
      }
    }
    .items:last-child {
      border-bottom: none;
    }
  }

  @media (min-width: 750px) {
    .login {
  .underline {
    width: 250px;
  }
  .login_header {
    width: 100%;
    height: 216px;
    img {
      width: 100%;
    }
  }
  .login_content {
    position: relative;
    top: -40px;
    width: 100%;
    height: 100%;
    background: #ffffff;
    // box-shadow: 0px 0px 20px 1px rgba(22, 12, 6, 0.09);
    border-radius: 20px 20px 0px 0px;
    .content {
      padding: 40px 30px;
    }
    .login_field {
      margin-top: 35px;
      position: relative;
      .icon {
        width: 20px;
        height: 20px;
      }
    }
    .content2 {
      margin-top: 20px;
    }
    .submit {
      // width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      font-weight: 400;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
    }
    .login_foter {
      // position: fixed;
      margin-top: 60px;
      .content3 {
        margin-top: 30px;
        text-align: center;
        text-decoration: underline;
      }
    }
    .line {
      color: #d8d8d8;
      margin: 0 13px;
    }
  }
}
  .listst {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 45px;
    left: 50%;
    z-index: 99;
    background-color: #f8f8f8;
    transform: translateX(-50%);
    border: 1px solid #666;
    .items {
      border-bottom: 1px solid #333;
    padding: 15px 5px;

      p {
        margin: 5px;
      }
    }
    .items:last-child {
      border-bottom: none;
    }
  }
  }
</style>
